<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">租户ID：</span>
                <el-input placeholder="输入租户ID" v-model.trim="tenant_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">操作人：</span>
                <el-input placeholder="输入操作人" v-model.trim="operator_people" clearable> </el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">版本类型：</span>
                <el-select v-model="edition_value" clearable placeholder="请选择版本类型">
                    <el-option v-for="item in editionArrs" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="task-one__btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table class="table-mb" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)" v-loading="loading">
            <el-table-column prop="id" label="租户ID" width="100" fixed="left"></el-table-column>
            <el-table-column prop="price" label="金额"></el-table-column>
            <el-table-column prop="banben" label="版本"></el-table-column>
            <el-table-column prop="remark" label="备注" width="180"></el-table-column>
            <el-table-column prop="operator_people" label="操作人" fixed="right"></el-table-column>
            <el-table-column prop="create_time" label="添加时间" width="200" fixed="right"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    // getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, search_btn, totalNums, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

loading.value = false
arr_data.value = [{
    id: 1,
    accont: '18206722101',
    price: '1000.00',
    banben: '基础版',
    operator_people: '张三',
    remark: '这是备注',
    create_time: '2022-07-08 14:10:12'
}, {
    id: 1,
    accont: '18206722101',
    price: '1000.00',
    banben: '基础版',
    operator_people: '张三',
    remark: '这是备注',
    create_time: '2022-07-08 14:10:12'
}]
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("product/price/index", params)
}

/**
 * @param {String} operator_people 操作人
 * @param {String} tenant_id 租户ID
 * @param {String} edition_value 版本类型
 * @param {Function} handleSearch 搜索员工按钮
 */
const operator_people = ref("")
const tenant_id = ref("")
const edition_value = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * 版本类型
 * @param {Array} editionArrs 版本数组
 * @param {Function} getEdition 获取版本
 */
const editionArrs = ref([{
    label: '基础版',
    value: 1
}, {
    label: '中级版',
    value: 2
}])
function getEdition() {
    proxy.$axios
        .get("client/detail")
        .then((res) => {
            if (res.data.code == 0) {
                drawerCustomer.value = true
                let result = res.data.data
                customer_obj.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => { })
}
</script>

<style lang="less" scoped>
</style>